<template>
  <div>
    <div class="config_box">
      <div class="top_type">
        <div class="sort_item active">院校优先</div>
      </div>
      <div class="top_config">
        <div class="config_item">
          <div class="item_left">就读地域</div>
          <div class="item_right">
            <div
              v-for="item in provideList"
              :key="item.province_id"
              class="right_btn_item"
              @click="provideListClick(item)"
            >
              <span
                :class="
                  queryParams.provide.includes(item.province_id) ? 'active' : ''
                "
              >
                {{ item.name }}
              </span>
            </div>
          </div>
        </div>
        <div class="config_item">
          <div class="item_left">院校类型</div>
          <div class="item_right">
            <div
              v-for="item in schoolList"
              :key="item.type"
              @click="schoolListClick(item)"
              class="right_btn_item"
            >
              <span
                :class="queryParams.school.includes(item.type) ? 'active' : ''"
              >
                {{ item.type_name }}
              </span>
            </div>
          </div>
        </div>
        <div class="config_item">
          <div class="item_left">院校性质</div>
          <div class="item_right">
            <div
              v-for="item in natureList"
              :key="item.id"
              @click="natureListClick(item)"
              class="right_btn_item"
            >
              <span
                :class="queryParams.nature.includes(item.id) ? 'active' : ''"
              >
                {{ item.label }}
              </span>
            </div>
          </div>
        </div>
        <div class="config_item">
          <div class="item_left">院校层次</div>
          <div class="item_right">
            <div
              v-for="item in levelList"
              :key="item.id"
              @click="levelListClick(item)"
              class="right_btn_item"
            >
              <span
                :class="queryParams.level.includes(item.id) ? 'active' : ''"
              >
                {{ item.label }}
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="top_selected">
        <div class="config_item">
          <div class="item_left">已选条件</div>
          <div class="item_right">
            <span
              v-for="item in provideList"
              :key="item.type"
              class="right_btn_item"
              v-show="queryParams.provide.includes(item.province_id)"
            >
              <span :class="'active'"> {{ item.name }} </span>
            </span>
            <span
              v-for="item in schoolList"
              :key="item.province_id"
              class="right_btn_item"
              v-show="queryParams.school.includes(item.type)"
            >
              <span :class="'active'"> {{ item.type_name }} </span>
            </span>
            <span
              v-for="item in natureList"
              :key="item.id"
              class="right_btn_item"
              v-show="queryParams.nature.includes(item.id)"
            >
              <span :class="'active'"> {{ item.label }} </span>
            </span>
            <span
              v-for="item in levelList"
              :key="item.id"
              class="right_btn_item"
              v-show="queryParams.level.includes(item.id)"
            >
              <span :class="'active'"> {{ item.label }} </span>
            </span>
          </div>
        </div>
        <div class="config_item">
          <div class="item_left"></div>
          <div class="item_right">
            <div class="item_btn" @click="handleSearch(2)">确定</div>
            <div class="item_btn" @click="resetSearch">重置筛选条件</div>
          </div>
        </div>
      </div>
    </div>
    <div class="menu_num_type">
      <div class="num_left">
        <div
          @click="menuIdClick(item)"
          v-for="item in listTotal"
          :class="menuId == item.type ? 'active' : ''"
          :key="item.type"
        >
          {{  item.type == 1
                ? "冲刺"
                : item.type == 2
                ? "稳妥"
                : item.type == 3
                ? "保底"
                : "全部", }}
          {{ item.count }}
        </div>
      </div>
      <!-- <div class="num_right">
        <div class="screen_item">
          <span>录取概率</span>
          <div>
            <span class="el-icon-caret-top" @click="sort('lvsort')"></span>
            <span class="el-icon-caret-bottom" @click="sort('lvsort')"></span>
          </div>
        </div>
        <div class="screen_item">
          <span>招生人数</span>
          <div>
            <span class="el-icon-caret-top" @click="sort('numsort')"></span>
            <span class="el-icon-caret-bottom" @click="sort('numsort')"></span>
          </div>
        </div>
      </div> -->
    </div>

    <div
      class="list_table"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0)"
    >
      <div class="school_table">
        <div class="field_title el-row">
          <div class="el-col el-col-4" style="text-align: left">
            <div>招生院校</div>
          </div>
          <div class="el-col el-col-3" style="text-align: left">
            <div>招生专业</div>
          </div>
          <div class="el-col el-col-3" style="text-align: center">
            <div>录取概率</div>
          </div>
          <div class="el-col el-col-3" style="text-align: left">
            <div>2024招生计划</div>
          </div>
          <div class="el-col el-col-8" style="text-align: left">
            <div>
              <div class="el-row" style="text-align: center">
                <div class="el-col el-col-6">历年</div>
                <div class="el-col el-col-6">2023</div>
                <div class="el-col el-col-6">2022</div>
                <div class="el-col el-col-6">2021</div>
              </div>
            </div>
          </div>
          <div class="el-col el-col-3" style="text-align: center">
            <div>操作</div>
          </div>
        </div>
        <div
          class="table_frame el-row"
          v-for="(item, i) in handleIfShow() ? list.slice(0, 3) : list"
          :key="i"
        >
          <div class="el-col el-col-4">
            <div class="cell_box" style="height: 100%; text-align: left">
              <div>
                <div class="is_title">
                  {{ item.name }}<br /><span
                    style="
                      display: inline-block;
                      margin-top: 5px;
                      font-size: 12px;
                    "
                    >院校代码：{{ item.code || "--" }}</span
                  ><br />
                  <p style="font-size: 12px">2023年选科：不限</p>
                  <p
                    style="
                      font-size: 12px;
                      font-weight: 500;
                      color: rgb(255, 102, 0);
                    "
                  >
                    2024年招生计划：{{ item.jhzsnum }}人
                  </p>
                  <p
                    style="
                      font-size: 12px;
                      font-weight: 500;
                      color: rgb(255, 102, 0);
                    "
                  >
                    2024年选科：不限
                  </p>
                </div>
                <div class="tags_list">
                  <template v-if="item.tags">
                    <div v-for="d in item.tags.split(',')" :key="d">
                      {{ d }}
                    </div>
                  </template>
                </div>
              </div>
            </div>
          </div>
          <div class="el-col el-col-3">
            <div class="cell_box" style="height: 100%; text-align: left">
              <div>
                <div class="is_title"></div>
                <div class="is_text"><br /></div>
              </div>
            </div>
          </div>
          <div class="el-col el-col-3">
            <div class="cell_box" style="height: 100%; text-align: center">
              <div>
                <div class="is_title" v-if="item.probability">
                  {{ item.probability.percent }}
                </div>
                <div class="is_img">
                  <img :src="require('@/assets/images/chong.png')" alt="" />
                </div>
              </div>
            </div>
          </div>
          <div class="el-col el-col-3">
            <div class="cell_box" style="height: 100%; text-align: left">
              <div>
                <div class="is_title" style="opacity: 1">
                  {{ item.jhzsnum }}人
                </div>
                <div class="is_desc">
                  <div>{{ item.province }}</div>
                  <!--   <div>大连市</div> -->
                  <div></div>
                </div>
              </div>
            </div>
          </div>
          <div class="el-col el-col-8">
            <div class="cell_box" style="height: 100%; text-align: left">
              <div>
                <div class="desc_box el-row">
                  <div class="desc_item el-col el-col-6">
                    <div class="is_bor">最低分数</div>
                    <div class="is_bor">最低位次</div>
                    <div class="is_bor">招生人数</div>
                    <div class="is_bor is_col">比我位次</div>
                  </div>
                  <template v-if="item.score.length != 0">
                    <div
                      class="desc_item el-col el-col-6"
                      v-for="(d, i) in item.score"
                      :key="i"
                    >
                      <div>{{ d.min_score || "--" }}</div>
                      <div>{{ d.min_rank || "--" }}</div>
                      <div>{{ d.num }}</div>
                      <div>
                        <span>{{ d.bwwc > 0 ? "高" : "低" }}</span
                        >{{ d.bwwc }}
                        <span
                          :class="
                            d.bwwc > 0
                              ? 'el-icon-caret-top'
                              : 'el-icon-caret-bottom'
                          "
                          :style="{
                            color: d.bwwc > 0 ? 'green' : 'rgb(248, 71, 88)',
                          }"
                        ></span>
                      </div>
                    </div>
                  </template>
                  <template v-else>
                    <div
                      class="desc_item el-col el-col-6"
                      v-for="(d, i) in 3"
                      :key="i"
                    >
                      <div>--</div>
                      <div>--</div>
                      <div>--</div>
                      <div>
                        <span>--</span>
                      </div>
                    </div>
                  </template>
                </div>
              </div>
            </div>
          </div>
          <div class="el-col el-col-3">
            <div class="cell_box" style="height: 100%; text-align: center">
              <div>
                <div class="operation_box">
                  <img
                    @click="handleExam(item)"
                    :src="require('@/assets/images/fenxi.png')"
                    alt=""
                    class="opera_img"
                  />
                  <div class="operation_btn" @click="addMojor(item)">
                    可填专业
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="index_page" v-if="!handleIfShow()">
          <el-pagination
            background
            layout="prev, pager, next"
            @current-change="handleCurrentChange"
            :current-page="queryParams.page"
            :page-size="queryParams.pageSize"
            :total="total"
          >
          </el-pagination>
        </div>
        <div class="table_frame el-row" v-if="handleIfShow()">
          <div
            class="is_modal_box"
            :style="{ top: list.length == 0 ? '-100px' : '-216px' }"
          >
            <div
              id="echarts_box"
              class="is_echarts_box"
              style="
                user-select: none;
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
                position: relative;
              "
            >
              <echarts
                ref="echarts"
                style="width: 100%; height: 100%"
              ></echarts>
            </div>
            <div class="is_info_box">
              <div>
                <img :src="require('@/assets/images/noVip.png')" alt="" />
                <div class="is_info_btn" @click="addVip">
                  立即开通VIP 查看全部志愿
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog title="考情分析" :visible.sync="kqDialog" width="60%">
      <div class="kq_serve">
        <div class="title_main">
          <div class="kq_title"></div>
          <div class="title_tip">专业分析</div>
          <!-- <div class="title_content">(独家内容授权，未经授权不可转载)</div> -->
        </div>
        <div class="kq_info" v-html="kqInfo.school_info"></div>
      </div>
    </el-dialog>
    <addMojor ref="addMojor"></addMojor>
    <addLogin ref="addLoginRef"></addLogin>
    <VIP ref="addVIPRef"></VIP>
  </div>
</template>

<script>
import { mapState } from "vuex";
import {
  getRecommendSchools,
  province,
  schoolType,
  getExamInfo,
} from "@/api/index";
import { EventBus } from "@/utils/eventBus";
import echarts from "./echarts.vue";
export default {
  name: "",
  components: { echarts },
  computed: {
    ...mapState({
      device: (state) => state.app.device,
    }),
  },
  created() {
    EventBus.$on("indexEvent", (data) => {
      this.queryParams.school_name = data;
      this.handleSearch();
    });
    EventBus.$on("resultIndexData", (data) => {
      this.handleSearch();
    });
  },
  data() {
    return {
      kqInfo: {},
      kqDialog: false,
      loading: false,
      provideList: [],
      schoolList: [],
      natureList: [
        { label: "公办", id: "公办" },
        { label: "民办", id: "民办" },
        { label: "中外合作办学", id: "中外合作办学" },
        { label: "内地与港澳台地区合作办学", id: "内地与港澳台地区合作办学" },
      ],
      levelList: [
        { label: "985", id: "985" },
        { label: "211", id: "211" },
        { label: "双一流", id: "双一流" },
        { label: "教育部直属", id: "教育部直属" },
        { label: "中央部委", id: "中央部委" },
        { label: "双高计划", id: "双高计划" },
        { label: "强基计划", id: "强基计划" },
      ],
      queryParams: {
        provide: [],
        school: [],
        nature: [],
        level: [],
        year: [],
        double_high: "",
        max_score: "",
        min_score: "",
        school_name: "",
        page: 1,
        pageSize: 10,
      },
      list: [],
      listTotal: [], //
      listData: [],
      total: 0,
      menuId: 1,
      echartsData: [],
      userInfo: {},
    };
  },
  mounted() {
    this.getdict();
    this.handleSearch(1);
    setTimeout(() => {
      this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
    }, 300);
  },
  methods: {
    handleIfShow() {
      if (this.userInfo && this.userInfo.is_vip == 2) {
        return false;
      } else {
        return true;
      }
    },
    /*
     * author：Gengbaodada
     * create by date：2025/05/03
     * content：点击考情分析
     */
    handleExam(row) {
      console.log("row", row);
      if (!this.handleIfShow()) {
        getExamInfo({ school_id: row.school_id }).then((res) => {
          if (res.data) {
            this.kqInfo = res.data;
            this.kqDialog = true;
          } else {
            this.$message.info("暂无数据");
          }
        });
      } else {
        if (this.ifLogin()) {
          this.$refs.addVIPRef.handleOpen();
        } else {
          this.$refs.addLoginRef.handleOpen();
        }
      }
    },
    /*
     * author：Gengbaodada
     * create by date：2025/05/02
     * content：分页
     */
    handleCurrentChange(val) {
      this.queryParams.page = val;
      this.handleSearch(1);
      window.scrollTo({
        top: 0,
        left: 0,
        behavior: "smooth", // 启用平滑滚动
      });
    },

    ifLogin() {
      return localStorage.getItem("userInfo");
    },
    addVip() {
      if (this.ifLogin()) {
        this.$refs.addVIPRef.handleOpen();
      } else {
        this.$refs.addLoginRef.handleOpen();
      }
    },
    addMojor(row) {
      if (!this.handleIfShow()) {
        this.$refs.addMojor.handleOpen(row);
      } else {
        if (this.ifLogin()) {
          this.$refs.addVIPRef.handleOpen();
        } else {
          this.$refs.addLoginRef.handleOpen();
        }
      }
    },
    menuIdClick(item) {
      console.log("item", item);
      this.queryParams.page = 1;
      this.menuId = item.type;
      this.list = item.data.data; //this.listTotal[id-1].data.data
      this.total = item.count;
      this.handleSearch(1);
    },
    getdict() {
      province().then((response) => {
        this.provideList = this.provideList.concat(response.data);
      });
      schoolType().then((response) => {
        this.schoolList = response.data;
      });
    },
    handleSearch(type) {
      if (type === 2 && this.userInfo.is_vip != 2) {
        this.$refs.addVIPRef.handleOpen();
        return;
      }
      var queryParams = {};
      queryParams.page = this.queryParams.page;
      queryParams.pageSize = this.queryParams.pageSize;
      queryParams.year = this.queryParams.year.join(",");
      queryParams.province = this.queryParams.provide.join(",");
      queryParams.school_name = this.queryParams.school_name;
      queryParams.school_type = this.queryParams.school.join(",");
      queryParams.school_nature = this.queryParams.nature.join(",");
      queryParams.f985 = this.queryParams.level.includes("985") ? 1 : "";
      queryParams.f211 = this.queryParams.level.includes("211") ? 1 : "";
      queryParams.dual_class = this.queryParams.level.includes("双一流")
        ? 1
        : "";
      queryParams.department = this.queryParams.level.includes("教育部直属")
        ? 1
        : "";
      queryParams.central = this.queryParams.level.includes("中央部委")
        ? 1
        : "";
      queryParams.double_high = this.queryParams.level.includes("双高计划")
        ? 1
        : "";
      queryParams.qj = this.queryParams.level.includes("强基计划") ? 1 : "";
      queryParams.min_score = this.queryParams.min_score;
      queryParams.max_score = this.queryParams.max_score;
      this.getList(queryParams, type);
    },
    resetSearch() {
      this.queryParams = {
        provide: [],
        school: [],
        nature: [],
        level: [],
        year: [],
        double_high: "",
        max_score: "",
        min_score: "",
        school_name: "",
        page: 1,
        pageSize: 10,
      };
      this.handleSearch(2);
    },
    levelListClick(row) {
      this.queryParams.level = this.toggleValueInArray(
        this.queryParams.level,
        row.id
      );
    },
    natureListClick(row) {
      this.queryParams.nature = this.toggleValueInArray(
        this.queryParams.nature,
        row.id
      );
    },
    schoolListClick(row) {
      console.log(row.type);
      this.queryParams.school = this.toggleValueInArray(
        this.queryParams.school,
        row.type
      );
    },
    //地域
    provideListClick(row) {
      this.queryParams.provide = this.toggleValueInArray(
        this.queryParams.provide,
        row.province_id
      );
    },
    getList(queryParams, first) {
      console.log("first", first);
      this.loading = true;
      getRecommendSchools(queryParams).then((response) => {
        this.listTotal = response.data;
        if (!localStorage.getItem("userInfo")) {
          this.list = response.data[this.menuId - 1].data.data.splice(0, 3);
        } else {
          this.total = response.data[this.menuId - 1].data.total;
          this.list = response.data[this.menuId - 1].data.data;
        }
        this.echartsData = [
          {
            value: response.data[0].count,
            name: "冲刺",
            itemStyle: { color: "#2198ff" },
          },
          {
            value: response.data[1].count,
            name: "稳妥",
            itemStyle: { color: "#04b756" },
          },
          {
            value: response.data[2].count,
            name: "保底",
            itemStyle: { color: "#fe6910" },
          },
        ];
        if (this.$refs.echarts) {
          this.$refs.echarts.initChart(this.echartsData);
        }
        setTimeout(() => {
          this.loading = false;
        }, 500);
      });
    },
    sort() {},
  },
};
</script>

<style scoped lang="scss">
.kq_serve {
  .kq_info {
    margin-top: 10px;
    min-height: 100px;
    max-height: 600px;
    overflow-y: scroll;
  }
  .title_main {
    display: flex;
    .title_content {
      color: #ff592f;
      display: inline-block;
      margin-left: 5px;
    }
    .title_tip {
      color: #000;
      font-weight: 600;
      font-size: 18px;
      margin-top: -4px;
    }
    .kq_title {
      width: 6px;
      height: 20px;
      background-color: #ff592f;
      border-radius: 5px;
      margin-right: 10px;
    }
  }
}
.index_page {
  margin: 20px;
  float: right;
}
.is_modal_box {
  height: 233px;
  width: 100%;
  position: absolute;
  top: -140px;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 20%, #fff8ed);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.is_modal_box .is_echarts_box {
  width: 440px;
  height: 100%;
}

.is_modal_box .is_info_box {
  flex: 1;
  height: 230px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.is_modal_box .is_info_box img {
  width: 420px;
  height: 190px;
}

.is_modal_box .is_info_box .is_info_btn {
  width: 420px;
  height: 40px;
  border-radius: 8px;
  background: #0478f1;
  color: #fff;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;
  top: -5px;
}

.config_box {
  width: 100%;
  border-radius: 8px;
  background-color: #fff;
}

.config_box .top_type {
  width: 100%;
  height: 56px;
  padding: 12px 16px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 2px solid #eff0f0;
}

.config_box .top_type .sort_item {
  height: 32px;
  padding: 0 12px;
  line-height: 32px;
  letter-spacing: 0.56px;
  border-radius: 4px;
  margin-right: 21px;
  cursor: pointer;
}

.config_box .top_type .active {
  color: #fff;
  font-weight: 700;
  background-color: #ff6a44;
}

.config_box .top_config,
.config_box .top_selected {
  padding: 16px 14px;
}

.config_box .top_config .config_search,
.config_box .top_selected .config_search {
  width: 360px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid #efefef;
  background: #f9fafa;
  overflow: hidden;
  margin-bottom: 15px;
}

.config_box .top_config .config_search input[type="text"],
.config_box .top_selected .config_search input[type="text"] {
  padding-left: 10px;
  width: 100%;
  height: 100%;
  outline: none;
  border: none;
}

.config_box .top_config .config_year,
.config_box .top_selected .config_year {
  width: 100%;
  height: 40px;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 15px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.config_box .top_config .config_year .is_choose_year,
.config_box .top_selected .config_year .is_choose_year {
  width: 100px;
  height: 34px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-radius: 4px;
  border: 1px solid #ccc;
}

.config_box .top_config .config_item,
.config_box .top_selected .config_item {
  display: flex;
  justify-content: flex-start;
}

.config_box .top_config .config_item .item_left,
.config_box .top_selected .config_item .item_left {
  width: 58px;
  color: #9ca1a6;
  margin-right: 12px;
}

.config_box .top_config .config_item .item_right,
.config_box .top_selected .config_item .item_right {
  flex: 1;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.config_box .top_config .config_item .item_right .item_btn,
.config_box .top_selected .config_item .item_right .item_btn {
  color: #0478f1;
  font-weight: 600;
  font-size: 14px;
  margin: 10px 20px 0 8px;
  cursor: pointer;
}

.config_box .top_config .config_item .item_right .right_btn_item,
.config_box .top_selected .config_item .item_right .right_btn_item {
  color: #606166;
  margin-right: 16px;
  margin-bottom: 16px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.config_box .top_config .config_item .item_right .right_btn_item span,
.config_box .top_selected .config_item .item_right .right_btn_item span {
  padding: 2px 8px;
}

.config_box .top_config .config_item .item_right .right_btn_item .active,
.config_box .top_selected .config_item .item_right .right_btn_item .active {
  background-color: rgba(201, 225, 251, 0.5);
  color: #0478f1;
}

.config_box .top_selected {
  width: 100%;
  border-top: 2px solid #eff0f0;
  padding: 12px 16px;
}
.recommendation_box {
  width: 100%;
}

.menu_num_type {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
}

.menu_num_type .num_left {
  height: 40px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 60%;
}

.menu_num_type .num_left div {
  width: calc(100% / 4);
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #eaebeb;
  color: #606166;
  font-weight: 600;
  letter-spacing: 0.56px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  cursor: pointer;
}

.menu_num_type .num_left .active {
  color: #fff;
  background-color: #0478f1;
}

.menu_num_type .num_right {
  width: 50%;
  display: flex;
  justify-content: right;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  color: #606166;
}

.menu_num_type .num_right .screen_item {
  width: 72px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  cursor: pointer;
}

.menu_num_type .num_right .screen_item div {
  display: flex;
  flex-direction: column;
  margin-left: 3px;
  position: relative;
}

.menu_num_type .num_right .screen_item div span:nth-child(2) {
  position: absolute;
  top: -2px;
  color: #ccc;
}

.menu_num_type .num_right .screen_item div span:first-child {
  position: absolute;
  bottom: -4px;
  color: #ccc;
}

.menu_num_type .num_right .screen_text {
  letter-spacing: 0.56px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.menu_num_type .num_right .screen_interval {
  display: flex;
  justify-content: center;
  align-items: center;
}

.menu_num_type .num_right .screen_interval div {
  width: 70px;
  height: 28px;
  border-radius: 35px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  text-align: center;
  line-height: 28px;
  overflow: hidden;
}

.menu_num_type .num_right .screen_interval div input[type="number"] {
  width: 70px;
  height: 28px;
  border: none;
  outline: none;
  text-align: center;
}

.list_table {
  width: 100%;
  min-height: 600px;
}
.list_table {
  width: 100%;
  min-height: 600px;
}

.school_table {
  border-radius: 4px;
  padding: 0 16px;
  background-color: #fff;
}

.school_table .field_title {
  height: 48px;
  line-height: 48px;
  letter-spacing: 0.56px;
  border-bottom: 1px solid #eff0f0;
}

.school_table .field_title div {
  font-weight: 700;
}

.school_table .is_empty_box {
  width: 100%;
  min-height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ccc;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.school_table .table_frame {
  border-bottom: 1px solid #eff0f0;
  position: relative;
}

.school_table .table_frame .cell_box {
  width: 100%;
  height: 100%;
}

.school_table .table_frame .cell_box .is_title {
  color: #222224;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.64px;
  padding-top: 10px;
}

.school_table .table_frame .cell_box .is_text {
  color: #606166;
  margin-top: 5px;
  font-size: 12px;
}

.school_table .table_frame .cell_box .is_desc {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 10px;
}

.school_table .table_frame .cell_box .is_desc div {
  color: #919294;
  margin-right: 8px;
}

.school_table .table_frame .cell_box .is_img {
  width: 100%;
  margin-top: 10px;
}

.school_table .table_frame .cell_box .is_img img {
  width: 24px;
  height: 24px;
}

.school_table .table_frame .cell_box .desc_box {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.school_table .table_frame .cell_box .desc_box .desc_item div {
  height: 55px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #f1f2f2;
  border-left: 1px solid #f1f2f2;
  color: #606166;
}

.school_table .table_frame .cell_box .desc_box .desc_item .is_bor {
  font-weight: 700;
}

.school_table .table_frame .cell_box .desc_box .desc_item .is_col {
  color: #0478f1;
}

.school_table .table_frame .cell_box .operation_btn,
.school_table .table_frame .cell_box .operation_btn_active {
  width: 89px;
  height: 28px;
  border-radius: 16px;
  background: rgba(201, 225, 251, 0.5);
  color: #0478f1;
  line-height: 28px;
  font-weight: 700;
  position: absolute;
  right: 18px;
  top: 35%;
  margin-top: 40px;
  transform: translateY(-50%);
  cursor: pointer;
}

.school_table .table_frame .cell_box .opera_img {
  width: 89px;
  height: 28px;
  position: absolute;
  right: 18px;
  top: 35%;
  transform: translateY(-40%);
  cursor: pointer;
}

.school_table .table_frame .cell_box .operation_btn_active {
  background-color: #0478f1;
  color: #fff;
}

.school_table .table_frame .cell_box .operation_active {
  background: #0478f1;
  color: #fff;
}

.school_table .table_frame .cell_box .tags_list {
  width: 100%;
  padding: 0 5px 0 0;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.school_table .table_frame .cell_box .tags_list div {
  padding: 3px 8px;
  background-color: #f6f7f7;
  color: #919294;
  border-radius: 3px;
  margin-right: 5px;
  margin-top: 5px;
}

.school_table .is_paging {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
  padding-bottom: 10px;
}
</style>
